<template>
  <div>
    <van-space></van-space>
    <van-row align="center">
      <van-col span="5"></van-col>
      <van-col span="4">
        <van-button icon="arrow-up" @click="send(2,['0'])"/>
      </van-col>
      <van-col span="8"></van-col>
    </van-row>
    <van-row align="center">
      <van-col span="4" offset="1">
        <van-button icon="arrow-left" @click="send(2,['3'])"/>
      </van-col>
      <van-col span="4"></van-col>
      <van-col span="4">
        <van-button icon="arrow" @click="send(2,['2'])"/>
      </van-col>
      <van-col span="4">
        <van-button type="primary" plain hairline @click="send(3,['1'])">
          <template #icon>
            <icon-refresh></icon-refresh>
          </template>
        </van-button>
      </van-col>
      <van-col span="4">
        <van-button type="warning" plain hairline @click="send(3,['0'])">
          <template #icon>
            <van-icon name="pause-circle-o" size="1.8em"/>
          </template>
        </van-button>
      </van-col>
    </van-row>
    <van-row align="center">
      <van-col span="5"></van-col>
      <van-col span="8">
        <van-button icon="arrow-down" @click="send(2,['1'])"/>
      </van-col>
      <van-col span="4"></van-col>
    </van-row>
    <van-space></van-space>
    <van-collapse v-model="active_item">
      <van-collapse-item title="舵机调试面板" name="servo" icon="apps-o">
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[0]" vertical @change="quadrupedTurn(0)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[0] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[1]" vertical @change="quadrupedTurn(1)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[1] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[2]" vertical @change="quadrupedTurn(2)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[2] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[3]" vertical @change="quadrupedTurn(3)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[3] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <van-stepper v-model="servo[0]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[1]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[2]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[3]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[4]" vertical @change="quadrupedTurn(4)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[4] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[5]" vertical @change="quadrupedTurn(5)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[5] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[6]" vertical @change="quadrupedTurn(6)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[6] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="6">
            <div class="slider-dev-v">
              <van-slider v-model="servo[7]" vertical @change="quadrupedTurn(7)" active-color="#37c279">
                <template #button>
                  <div class="slider_ball">{{ servo[7] }}</div>
                </template>
              </van-slider>
            </div>
          </van-col>
          <van-col span="4"></van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center" justify="center">
          <van-col span="6">
            <van-stepper v-model="servo[4]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[5]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[6]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
          <van-col span="6">
            <van-stepper v-model="servo[7]" min="0" max="100" input-width="2em" button-size="1.8em"/>
          </van-col>
        </van-row>
        <van-space></van-space>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import {IconRefresh} from "@arco-design/web-vue/es/icon";
import {Message} from "@arco-design/web-vue";
import {cmdChannel} from "@/js/on_start";

export default {
  name: 'quadruped',
  components: {
    IconRefresh
  }
  , data() {
    return {
      servo: [50, 50, 50, 50,
        50, 50, 50, 50],
      active_item: [],
      sn: '',
      websocket: null
    }
  },
  created() {
    this.sn = history.state['sn'];
    if (process.env.NODE_ENV === 'development') {
      Message.info({content: `this sn is  ${this.sn}`, showIcon: true});
    }
  }, methods: {
    send(opcode, params) {
      cmdChannel.sendRawCmd(this.sn, opcode, params);
    },
    quadrupedTurn(index) {
      cmdChannel.sendRawCmd(this.sn, 1, ['' + index, '' + this.servo[index]]);
    }
  }
}
</script>
<style>
.slider-dev-v {
  height: 14em;
  text-align: center;
}

.slider_ball {
  width: 2em;
  height: 2em;
  color: #fff;
  text-align: center;
  background-color: var(--van-success-color);
  border-radius: 50%;
  vertical-align: middle;
  line-height: 2em;
}
</style>